{% extends "docker_engine/base.html" %}


{% load staticfiles %}

{% block extra-css %}
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/fancybox/source/jquery.fancybox.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/uniform/css/uniform.default.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/chosen-bootstrap/chosen/chosen.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/bootstrap/css/bootstrap-fileupload.css' %}" />
{% endblock %}


{% block content %}
<div id="page" class="dashboard">
    <!-- BEGIN PULL IMAGE FORM PORTLET-->   
    <div class="widget">
        <div class="widget-title">
            <h4><i class="icon-reorder"></i> Pull Image From Docker Hub</h4>
        </div>
        <div class="widget-body form">
            <!-- BEGIN FORM-->
            <form action="/docker/image/pull/" method="post" class="form-horizontal">
                {% csrf_token %}
                <div class="control-group">
                    <label class="control-label" for="repository">Repository</label>
                    <div class="controls">
                        <input type="text" class="span6 popovers" name="repository" data-trigger="hover" data-content="The name of repository." data-original-title="Repository" />
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="tag">Tag</label>
                    <div class="controls">
                        <input type="text" class="span6 popovers" name="tag" placeholder="Default pull the latest" data-trigger="hover" data-content="The tag of repository." data-original-title="Tag" />
                    </div>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Pull Image</button>
                </div>
            </form>
            <!-- END FORM-->             
        </div>
    </div>
    <!-- END PULL IMAGE FORM PORTLET-->

    <!-- BEGIN IMPORT IMAGE FORM PORTLET--> 
    <div class="widget">
        <div class="widget-title">
            <h4><i class="icon-reorder"></i> Import Image From Tarball</h4>
        </div>
        <div class="widget-body form">
            <!-- BEGIN FORM-->
            <form action="/docker/image/import/" method="post" class="form-horizontal" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="control-group">
                    <label class="control-label">Tarball File</label>
                    <div class="controls">
                        <div class="fileupload fileupload-new" data-provides="fileupload">
                            <div class="input-append">
                                <div class="uneditable-input span3">
                                    <i class="icon-file fileupload-exists"></i>
                                    <span class="fileupload-preview"></span>
                                </div>
                                <span class="btn btn-file">
                                    <span class="fileupload-new">Select file</span>
                                    <span class="fileupload-exists">Change</span>
                                    <input type="file" class="default" name="import-image" />
                                </span>
                                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Import Image</button>
                </div>
            </form>
            <!-- END FORM-->             
        </div>
    </div>
    <!-- END IMPORT IMAGE FORM PORTLET-->

    <!-- BEGIN BUILD IMAGE FORM PORTLET--> 
    <div class="widget">
        <div class="widget-title">
            <h4><i class="icon-reorder"></i> Build Image From Dockerfile</h4>
        </div>
        <div class="widget-body form">
            <!-- BEGIN FORM-->
            <form action="/docker/image/build/" method="post" class="form-horizontal" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="control-group">
                    <label class="control-label">Dockerfile Folder</label>
                    <div class="controls">
                        <div class="fileupload fileupload-new" data-provides="fileupload">
                            <div class="input-append">
                                <div class="uneditable-input span3">
                                    <i class="icon-file fileupload-exists"></i>
                                    <span class="fileupload-preview"></span>
                                </div>
                                <span class="btn btn-file">
                                    <span class="fileupload-new">Select file</span>
                                    <span class="fileupload-exists">Change</span>
                                    <input type="file" class="default" name="build-image" multiple />
                                </span>
                                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Build Image</button>
                </div>
            </form>
            <!-- END FORM-->             
        </div>
    </div>
    <!-- END BUILD IMAGE FORM PORTLET-->
</div>
{% endblock %}


{% block extra-js %}
<script src="{% static 'docker_engine/assets/chosen-bootstrap/chosen/chosen.jquery.min.js' %}"></script>
<script src="{% static 'docker_engine/assets/uniform/jquery.uniform.min.js' %}"></script>
<script src="{% static 'docker_engine/assets/fancybox/source/jquery.fancybox.pack.js' %}"></script>
<script src="{% static 'docker_engine/assets/bootstrap/js/bootstrap-fileupload.js' %}"></script>
<script src="{% static 'docker_engine/js/image/all.js' %}"></script>
<script src="{% static 'docker_engine/js/image/new.js' %}"></script>
{% endblock %}